<template>
    <div>
        <div @click="clickMenu(item)" :class="{activeTagsNav:currentRoute()}">
            <side-menu-item :item="item"></side-menu-item>
        </div>
        <div class="menu-item" v-for="subItem in item.children"
             v-show="item.children&&item.children.length&&!item.meta.arrow">
            <menu-item :item="subItem"></menu-item>
        </div>
    </div>
</template>

<script>
    import SideMenuItem from "./SideMenuItem";
    import MenuItem from "./MenuItem";

    export default {
        name: "menuItem",
        components: {SideMenuItem, MenuItem},
        props: {
            item: {
                meta: {
                    arrow: true,
                    title: '未知'
                }
            }
        },
        data() {
            return {}
        },
        created() {

        },
        methods: {
            clickMenu(item) {
                item.meta.arrow = !item.meta.arrow;

                this.sameLevelDo(this.$store.state.menuList,item);

                //仅表示具体页面的路由菜单能跳转，文件夹不能跳转
                if (!item.children || !item.children.length) {
                    if (this.$route.name !== item.name) {
                        this.$navTo(item.path)
                    }
                }

                this.$util.menuList(this.$store.state.menuList)
            },
            currentRoute() {
                return this.$route.name === this.item.name;
            },
            sameLevelDo(menuList,item){
                const index=menuList.findIndex(e=>e.name===item.name);

                if(index>=0){
                    const currentMenu=menuList[index];
                    //一级菜单之间的互斥
                    //点击一级菜单，展开当前一级菜单，收起其他一级菜单
                    for (let i in menuList) {
                        const menu=menuList[i];
                        //收起其他一级菜单
                        if(currentMenu.name!==menu.name){
                            menu.meta.arrow=true;//收起菜单
                        }else {
                            //当前一级菜单，保持原有的状态
                            //一级菜单下，不同菜单的互斥
                            //todo 二级菜单可以互斥或互斥，看需求
                        }
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .activeTagsNav {
        color: #e6bf7d;
    }

    .menu-item{
        padding-left: 14px;
    }
</style>